<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	  <title>HTML5 - JAVASCRIPT - CSS3</title>
	  <%= javascript_include_tag :defaults %>
	  <%= yield :head %>
	  <script type="text/javascript" charset="utf-8">
		  var goster = function  () {
			var yeni_text = document.createTextNode("id özelliği");
			var div = document.getElementById("icerik");
			div.appendChild(yeni_text);
		  }
	  </script>
	  <style type="text/css" media="screen">
		  .shadow {
		  	margin-top: 20px;
		  	width: 230px;
		  	height: 100px;
		  	background-color: khaki;
		  	box-shadow: 20px -10px crimson;
		  }
		  .renk{
		  	font-family: calibri;
		  	color: blue;
		  }
		  #icerik{
		  	height: 50px;
		  	width: 200px;
		  	background-color: lightblue;
		  	overflow: hidden;
		  }
		 /*header {
		  	width: 750px;
		  	height: 85px;
		  	background-color: #B3B5FD;
		  	margin: 0px ;
		  	padding: 5px;
		 }*/
		  header h1 {
		  	font-family: calibri;
		  	color: #008000;
		  	margin: 5px;
		  }
		  header img {
		  	float: right;
		  }
		  header span {
		  	font-style: italic;
		  }
		  nav {
		  	width: 145px;
		  	height: 260px;
		  	background-color: #ae364c;
		  	padding: 5px;
		  	font-family: calibri;
		  	border-radius: 5px 30px;
		  	
		  }
		  nav h4 {
		  	color: white;
		  	margin-left: 8px;
		  	margin: 0px;
		  }
		  nav > ul {
		  	margin: 5px 0px;
		  	padding-left: 20px;
		  	list-style-type: none;
		  }
		  nav > ul a {
		  	text-decoration: none;
		  	color: #ffff00;
		  }
		  p,h3 {
		  	margin: 0px;
		  }
		  article p {
		  	font-family: calibri;
		  	font-style: italic;
		  }
		  footer {
		  	text-align: right;
		  }
		  footer a {
		  	background-color: hsl(306, 83%, 36.9%);
		  	color: white;
		  	font-family: Verdana;
		  	font-size: 11px;
		  	text-decoration: none;
		  }
		  article {
		  	width: 437px;
		  	height: 110px;
		  	background-color: hsl(0, 100%, 91.4%);
		  	padding: 15px;
		  	border-radius: 30px;
		  }
		  div#content {
		  	margin: 0px;
		  	width: 642px;
		  	height: 280px;
		  	background-color: lightblue;
		  }
		  section {
		  	float: left;
		  	margin: 5px;
		  }
		  aside {
		  	position: absolute;
		  	top: 50px;
		  	right: 0px;
		  	background-color: #DEE17C;
		  	width: 150px;
		  	height: 170px;
		  	text-indent: 5px;
		  }


	  </style>
  </head>
  <body>
  	<div id="content">
  		<section>
  			<nav>
		  		<h4>Yapısal Elemanlar</h4>
		  		<ul>
		  			<li><a href="#">Header</a></li>
		  			<li><a href="#">Footer</a></li>
		  			<li><a href="#">Section</a></li>
		  			<li><a href="#">Aside</a></li>
		  			<li><a href="#">Hgroup</a></li>
		  		</ul>
		  		<img alt="res" src="/images/semantics.png" />
  			</nav>
  		</section>
  		<section class="orta">
  			<article>
		  		<header>
		  			<h3>Lorem Ipsum</h3>
		  		</header>
		  		<p>Pellentesque 
		  			fermentum, neque vitae tempor pellentesque, enim nulla accumsan 
		  			lacus, <mark> ut laoreet purus mauris</mark> nec felis. Mauris ultrices iaculis 
		  			dolor, id porttitor augue adipiscing sed. 
		  		</p>
		  		<footer>
		  			<a href="#">yazının devamı</a>
		  		</footer>
		  		<aside>
		  			Daha fazla bilgi için
		  			<img src="/images/rails.png" alt="js"/>
		  		</aside>
  			</article>
  		</section>
  	</div>
  	<br />
  	<br />
  	<article>
  		<header>
  			<h3>Lorem Ipsum</h3>
  		</header>
  		<p>Pellentesque 
  			fermentum, neque vitae tempor pellentesque, enim nulla accumsan 
  			lacus, ut laoreet purus mauris nec felis. Mauris ultrices iaculis 
  			dolor, id porttitor augue adipiscing sed. 
  		</p>
  		<footer>
  			<a href="#">yazının devamı</a>
  		</footer>
  	</article>
  	<br />
  	<br />
  	<nav>
  		<h4>Yapısal Elemanlar</h4>
  		<ul>
  			<li><a href="#">Header</a></li>
  			<li><a href="#">Footer</a></li>
  			<li><a href="#">Section</a></li>
  			<li><a href="#">Aside</a></li>
  			<li><a href="#">Hgroup</a></li>
  		</ul>
  		<img alt="res" src="/images/semantics.png" />
  	</nav>
  	<br />
  	<br />
  	<p>
  	  Açı:
  	  <meter min="0" max="180" low="30" optimum="90" high="120" value="115"></meter>
  	</p>
    <p>
      Durum:
      <progress max="100" value="80"></progress>
    </p>
  	<hgroup>
  		<h1>H1 Başlık</h1>
  		<h2>H2 Başlık</h2>
  	</hgroup>
  	<header>
  		<img alt="html%" src="/images/html5-h.png" />
  		<h1>Her yönüyle HTML5</h1>
  		<span>Yeni nesil HTML5</span>
  	</header>
  	<br />
  	<br />
  	<div id="icerik" onmouseover="goster()"></div>
  	<br />
  	<br />
  	<p class="shadow">Birinci div elemanı</p>
  	<div class="renk">İkinci div elemanı</div>
  	<br />
  	<br />
  	<div contenteditable="true">
  		Düzenlenebilir içerik
  	</div>
  	<div contenteditable="true">
  		<img alt="düzenle" src="/images/html5.png" />
  	</div>
  </body>
</html>
